<script setup>
import { ref, computed, onMounted, watch } from 'vue';
import { useStore } from 'vuex';
import socket from '../../socket';

const store = useStore();
const searchName = ref('');
const filteredProjects = ref([]);
const currentPage = ref(1);
const pageSize = ref(5);

onMounted(() => {
  fetchData();
});

async function fetchData() {
  await store.dispatch('asyncFetchRecentProjectsList');
}

function formatModifiedTime(timestamp) {
  const seconds = Math.floor((new Date() - new Date(timestamp * 1000)) / 1000);
  let interval = seconds / 31536000;

  if (interval > 1) {
    return Math.floor(interval) + " 年前";
  }
  interval = seconds / 2592000;
  if (interval > 1) {
    return Math.floor(interval) + " 个月前";
  }
  interval = seconds / 86400;
  if (interval > 1) {
    return Math.floor(interval) + " 天前";
  }
  interval = seconds / 3600;
  if (interval > 1) {
    return Math.floor(interval) + " 小时前";
  }
  interval = seconds / 60;
  if (interval > 1) {
    return Math.floor(interval) + " 分钟前";
  }
  return Math.floor(seconds) + " 秒前";
}

function handleClick(project) {
  const path = project.path;
  if (path) {
    socket.emit('open_file', path);
  } else {
    console.error('项目没有指定路径');
  }
}

watch(() => store.state.recentProjectslist, updateFilteredProjects);
watch(searchName, updateFilteredProjects);

// function updateFilteredProjects() {
//   const keyword = searchName.value.trim().toLowerCase();
//   filteredProjects.value = keyword
//     ? store.state.recentProjectslist.filter(project =>
//         project.name.toLowerCase().includes(keyword)
//       )
//     : store.state.recentProjectslist;
// }

function updateFilteredProjects() {
  const keyword = searchName.value.trim().toLowerCase();
  let projects = store.state.recentProjectslist;

  if (keyword) {
    projects = projects.filter(project =>
      project.name.toLowerCase().includes(keyword)
    );
  }

  // Sort the projects by modified date in descending order
  projects.sort((a, b) => b.modified - a.modified);

  filteredProjects.value = projects;
}


const currentProjects = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return filteredProjects.value.slice(start, end);
});

function handleCurrentChange(val) {
  currentPage.value = val;
}

updateFilteredProjects();
</script>

<template>
  <div class="w-full bg-white rounded-xl pt-6 pb-7 pl-5 pr-10">
    <div class="flex items-center mb-5 justify-between">
      <div class="font-bold text-xl pl-4">最近项目</div>
      <div class="w-36">
        <el-input size="large" v-model="searchName" placeholder="请输入项目名称"/>
      </div>
    </div>
    <div class="bg-gray-100 mt-2 mb-5 ml-4" style="height: 1px"></div>
    <div style="padding-left: 18px; width: 100%">
      <el-table :data="currentProjects" width="100%">
        <el-table-column prop="name" label="名称" width="180px" />
        <el-table-column prop="boards[0].id" label="开发平台"/>
        <el-table-column prop="modified" label="修改日期" width="120px">
          <template #default="{ row }">
            {{ formatModifiedTime(row.modified) }}
          </template>
        </el-table-column>
        <el-table-column prop="action" label="操作" width="130px" fixed="right">
          <template #default="{ row }">
            <el-button link type="primary" size="" style="color: #409eff" @click="() => handleClick(row)">打开</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="flex justify-center items-center mt-10"> 
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pageSize"
          :total="filteredProjects.length"
          layout="prev, pager, next"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>
